<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>GraphWalker Studio</title>
  <link rel="stylesheet" type="text/css" href="lib/jquery-ui-1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" type="text/css" href="lib/jquery-mobile-1.4.5/jquery.mobile-1.4.5.css">
  <link rel="stylesheet" type="text/css" href="lib/context.js/context.standalone.css">
  <style>
    #loading-mask {
      background-color: white;
      height: 100%;
      left: 0;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9999;
    }
  </style>
</head>
<body>
  <div id="loading-mask"></div>
  <div data-role="page" id="panel-fixed-page1">
    <div data-role="header" data-theme="a" data-position="fixed">
      <h1>GraphWalker Studio</h1>
      <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
      <a href="#add-form" data-icon="gear" data-iconpos="notext">Add</a>
    </div>

    <div data-role="content" class="jqm-content">
      <div id="tabs">
        <ul></ul>
      </div>
      <div data-demo-html="#panel-fixed-page1" data-demo-css="true"></div>
    </div>

    <div data-role="footer" data-position="fixed" data-theme="a">
      <h4 id="issues">Fixed footer</h4>
    </div>

    <div data-role="panel" data-position-fixed="true" data-theme="a" id="nav-panel" data-dismissible="false">
      <ul data-role="listview" data-theme="a" class="nav-search">
        <li data-icon="delete">
          <a href="#" data-rel="close">Close menu</a>
        </li>
      </ul>

      <ul data-role="listview" data-theme="a" class="nav-search">
        </li>
          <fieldset data-role="fieldcontain">
            <button type='button' data-mini="true" id="newTest" onclick="graphwalker.studio.onNewTest()">New test</button>
            <button type='button' data-mini="true" id="loadTest" onclick="graphwalker.studio.onLoadTest()">Load test</button>
            <button type='button' data-mini="true" id="saveTest" onclick="graphwalker.studio.onSaveTest()">Save test</button>
          </fieldset>
         </li>
      </ul>

      <ul data-role="listview" data-theme="a" class="nav-search">
        </li>
        <fieldset data-role="fieldcontain">
          <button type='button' data-mini="true" id="runTest" onclick="graphwalker.studio.onRunTest()">Run test</button>
          <button type='button' data-mini="true" id="resetTest" onclick="graphwalker.studio.onResetTest()">Reset test</button>
          <button type='button' data-mini="true" id="pausePlayExecution" onclick="graphwalker.studio.onPausePlayExecution(this)" value="Pause">Pause</button>
          <button type='button' data-mini="true" id="stepExecution" onclick="graphwalker.studio.onStepExecution()">Step</button>
        </fieldset>

          <label for="executionSpeedSlider">Execution delay (ms)</label>
          <input type="range" id="executionSpeedSlider" value="0" min="0" max="500" data-highlight="true"/>
        </li>
      </ul>

      <ul data-role="listview" data-theme="a" class="nav-search">
        </li>
        <fieldset data-role="fieldcontain">
          <button type='button' data-mini="true" id="addModel" onclick="graphwalker.studio.onAddModel()">Add Model</button>
          <button type='button' data-mini="true" id="doLayout" onclick="graphwalker.studio.onDoLayout()">Do layout</button>
        </fieldset>
        </li>
      </ul>

      <ul data-role="listview" data-theme="a" class="nav-search">
        </li>
          <label for="modelName">Model name:</label>
          <input type="text" data-mini="true" id="modelName" value="" placeholder="model name"/>

          <label for="generator-builder">Model generator builder:</label>
          <input type="text" data-mini="true" id="generator-builder" value="" value="" placeholder="generator builder"/>

          <label for="generator">Model generator:</label>
          <input type="text" data-mini="true" id="generator" value="" value="" placeholder="generator(s)"/>

          <label for="modelActions">Model actions:</label>
          <input type="text" data-mini="true" id="modelActions" value="" value="" placeholder="model action(s)"/>

          <label for="modelRequirement">Model requirement:</label>
          <input type="text" data-mini="true" id="modelRequirement" value="" value="" placeholder="model requirement(s)"/>

          <label for="label">Element name:</label>
          <input type="text" data-mini="true" id="label" value="" value="" placeholder="element name"/>

          <label for="label">Element id:</label>
          <input type="text" data-mini="true" id="elementId" value="" readonly/>

          <label for="sharedStateName">Shared name:</label>
          <input type="text" data-mini="true" id="sharedStateName" value="" value="" placeholder="element shared name"/>

          <label for="guard">Guard:</label>
          <input type="text" data-mini="true" id="guard" value="" value="" placeholder="element guard"/>

          <label for="weight">Weight:</label>
          <input type="text" data-mini="true" id="weight" value="" value="" placeholder="element weight"/>

          <label for="actions">Actions:</label>
          <input type="text" data-mini="true" id="actions" value="" value="" placeholder="element action(s)"/>

          <label for="requirements">Requirements:</label>
          <input type="text" data-mini="true" id="requirements" value="" value="" placeholder="element requirement(s)"/>

          <label for="checkboxStartElement">Start element:</label>
          <input type="checkbox" data-mini="true" id="checkboxStartElement" class="custom"/>
        </li>
      </ul>
    </div>

    <div id="add-form" data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a">
      <form class="userform">
        <h2>Connection</h2>
        <label for="location">Location:</label>
        <input type="text" name="location" id="location" value="" data-clear-btn="true" data-mini="true">
        <div class="ui-grid-a">
          <div class="ui-block-a">
            <a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true" onclick="graphwalker.studio.onConnect()">Connect</a>
          </div>
          <div class="ui-block-b">
            <a href="#" data-rel="close" data-role="button" data-theme="a" data-mini="true" onclick="graphwalker.studio.onDisconnect()">Disconnect</a>
          </div>
        </div>
      </form>
    </div>
  </div>

  <script type="text/javascript" src="lib/react-15.1.0/react.js"></script>
  <script type="text/javascript" src="lib/react-15.1.0/react-dom.js"></script>
  <script type="text/javascript" src="lib/jquery-2.2.4/jquery.js"></script>
  <script type="text/javascript" src="lib/jquery-ui-1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="lib/jquery-mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
  <script type="text/javascript" src="lib/context.js/context.js"></script>
  <script type="text/javascript" src="lib/cytoscape-2.7.11/cytoscape.js"></script>
  <script type="text/javascript" src="lib/dagre-0.7.4/dagre.js"></script>
  <script type="text/javascript" src="lib/cytoscape-dagre-1.3.0/cytoscape-dagre.js"></script>
  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>
